<template>
  <div>
    <div id="cart">
      <div class="banner_x center">
        <router-link to="/body">
          <div class="logo fl">
            <img src="https://wyh-777.oss-cn-nanjing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720230522140608.jpg">
          </div>
        </router-link>
        <div class="wdgwc fl ml20">购物车</div>
        <div class="wxts fl ml20">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div>
        <div class="clear"></div>
      </div>
      <div class="cart_line"></div>
      <div class="cart_bg">
        <div class="list center">
          <div class="top2 center">
            <div class="sub_top fl">
            </div>
            <div class="sub_top fl">商品名称</div>
            <div class="sub_top fl">单价</div>
            <div class="sub_top fl">数量</div>
            <div class="sub_top fl">小计</div>
            <div class="sub_top fr">操作</div>
            <div class="clear"></div>
          </div>
          <!-- 搜索的数据为空的话 -->
          <el-empty :image-size="100" v-if="goods.cartInfo == ''" />

          <div class="content2 center" v-for="item in goods.cartInfo" :key="index">
            <div class="sub_content fl ">
            </div>
            <div class="sub_content cover fl"><img :src="item.goodsCoverImg"></div>
            <div class="sub_content fl ft20">{{ item.goodsName }}</div>
            <div class="sub_content fl">{{ item.sellingPrice }}元</div>
            <div class="sub_content fl">
              <input class="goods_count" type="number" @blur="updateItem(item.goodsId, item.goodsCount)"
                v-model="item.goodsCount" step="1" min="1" max="5">
            </div>
            <div class="sub_content fl">{{ item.sellingPrice * item.goodsCount }}</div>
            <div class="sub_content fl"><a href="##" @click="deleteItem(item.goodsId)" style="height: 0px;">×</a>
            </div>
            <div class="clear"></div>
          </div>

        </div>
        <div class="pre_order mt20 center">
          <div class="tips fl ml20">
            <ul>
              <li>
                <RouterLink to="/body">继续购物</RouterLink>
              </li>
              <li>|</li>
              <li>共<span>{{ totalNumber }}</span>件商品</li>
              <div class="clear"></div>
            </ul>
          </div>
          <div class="order_div fr">
            <div class="order_total fl">合计（不含运费）：<span>{{ totalPrice }}元</span></div>
            <div class="order_button fr">
              <input class="order_button_d" type="button" name="settle" @click="settle" value="去结算">
            </div>
            <div class="clear"></div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <div class="site-footer">
      <div class="footer-related">
        <div class="footer-article w1100">
          <dl class="contact clearfix">
            <dt class="fl">
              <i class="iconfont"></i>
            </dt>
            <dd class="fl">
              <p class="text">人工客服</p>
              <p class="tel" style="top: -10px;">小王在路上</p>
              <a style="top: -10px;" target="_blank"
                href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=YC3qPRgN9pghl0FkKwGzKcBp7LocZX9a&authKey=xqEK8Lhh3L6skTQTKgHW9DA9p7Q92FHj2GbK7q5jOw31SOU5Go4PloIlNs2erMu6&noverify=0&group_code=275656753">在线咨询</a>
            </dd>
          </dl>
          <dl class="col-article">
            <dt>帮助中心</dt>
            <dd><a rel="nofollow"
                href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=YC3qPRgN9pghl0FkKwGzKcBp7LocZX9a&authKey=xqEK8Lhh3L6skTQTKgHW9DA9p7Q92FHj2GbK7q5jOw31SOU5Go4PloIlNs2erMu6&noverify=0&group_code=275656753"
                target="_blank">账户管理</a></dd>
            <dd><a rel="nofollow"
                href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=YC3qPRgN9pghl0FkKwGzKcBp7LocZX9a&authKey=xqEK8Lhh3L6skTQTKgHW9DA9p7Q92FHj2GbK7q5jOw31SOU5Go4PloIlNs2erMu6&noverify=0&group_code=275656753"
                target="_blank">购物指南</a></dd>
            <dd><a rel="nofollow"
                href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=YC3qPRgN9pghl0FkKwGzKcBp7LocZX9a&authKey=xqEK8Lhh3L6skTQTKgHW9DA9p7Q92FHj2GbK7q5jOw31SOU5Go4PloIlNs2erMu6&noverify=0&group_code=275656753"
                target="_blank">订单操作</a></dd>
          </dl>
          <dl class="col-article">
            <dt>关注我们</dt>
            <dd><a rel="nofollow"
                href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=YC3qPRgN9pghl0FkKwGzKcBp7LocZX9a&authKey=xqEK8Lhh3L6skTQTKgHW9DA9p7Q92FHj2GbK7q5jOw31SOU5Go4PloIlNs2erMu6&noverify=0&group_code=275656753"
                target="_blank">新浪微博</a></dd>
            <dd><a rel="nofollow"
                href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=YC3qPRgN9pghl0FkKwGzKcBp7LocZX9a&authKey=xqEK8Lhh3L6skTQTKgHW9DA9p7Q92FHj2GbK7q5jOw31SOU5Go4PloIlNs2erMu6&noverify=0&group_code=275656753"
                target="_blank">官方微信</a></dd>
            <dd><a rel="nofollow"
                href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=YC3qPRgN9pghl0FkKwGzKcBp7LocZX9a&authKey=xqEK8Lhh3L6skTQTKgHW9DA9p7Q92FHj2GbK7q5jOw31SOU5Go4PloIlNs2erMu6&noverify=0&group_code=275656753"
                target="_blank">联系我们</a></dd>
          </dl>
          <dl class="col-article">
            <dt>线下门店</dt>
            <dd><a rel="nofollow"
                href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=YC3qPRgN9pghl0FkKwGzKcBp7LocZX9a&authKey=xqEK8Lhh3L6skTQTKgHW9DA9p7Q92FHj2GbK7q5jOw31SOU5Go4PloIlNs2erMu6&noverify=0&group_code=275656753"
                target="_blank">ZHIYIN TOWN</a>
            </dd>
            <dd><a rel="nofollow"
                href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=YC3qPRgN9pghl0FkKwGzKcBp7LocZX9a&authKey=xqEK8Lhh3L6skTQTKgHW9DA9p7Q92FHj2GbK7q5jOw31SOU5Go4PloIlNs2erMu6&noverify=0&group_code=275656753"
                target="_blank">服务网点</a></dd>
            <dd><a rel="nofollow"
                href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=YC3qPRgN9pghl0FkKwGzKcBp7LocZX9a&authKey=xqEK8Lhh3L6skTQTKgHW9DA9p7Q92FHj2GbK7q5jOw31SOU5Go4PloIlNs2erMu6&noverify=0&group_code=275656753"
                target="_blank">授权体验店</a></dd>
          </dl>
          <dl class="col-article">
            <dt>关于只因</dt>
            <dd><a rel="nofollow"
                href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=YC3qPRgN9pghl0FkKwGzKcBp7LocZX9a&authKey=xqEK8Lhh3L6skTQTKgHW9DA9p7Q92FHj2GbK7q5jOw31SOU5Go4PloIlNs2erMu6&noverify=0&group_code=275656753"
                target="_blank">了解只因</a>
            </dd>
            <dd><a rel="nofollow"
                href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=YC3qPRgN9pghl0FkKwGzKcBp7LocZX9a&authKey=xqEK8Lhh3L6skTQTKgHW9DA9p7Q92FHj2GbK7q5jOw31SOU5Go4PloIlNs2erMu6&noverify=0&group_code=275656753"
                target="_blank">加入只因</a>
            </dd>
            <dd><a rel="nofollow"
                href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=YC3qPRgN9pghl0FkKwGzKcBp7LocZX9a&authKey=xqEK8Lhh3L6skTQTKgHW9DA9p7Q92FHj2GbK7q5jOw31SOU5Go4PloIlNs2erMu6&noverify=0&group_code=275656753"
                target="_blank">捐赠</a>
            </dd>
          </dl>
          <dl class="wx">
            <dt></dt>
            <dd>
              <img src="https://wyh-777.oss-cn-nanjing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720230522140608.jpg">
            </dd>

          </dl>
        </div>


      </div>
    </div>
  </div>
</template>

<script>
import '../../assets/mall/css/common.css'
import '../../assets/mall/css/iconfont.css'
import '../../assets/mall/styles/header.css'
import '../../assets/mall/styles/cart.css'
import '../../assets/admin/plugins/sweetalert2/sweetalert2.min.css'
import axios from 'axios'
import Store from '../../stores/Store.js'
export default {
  data() {
    return {
      goods: Store(),

    }
  },
  created() {
    axios.post('http://localhost:8080/goods//searchCartInfo/' + this.goods.userInfo.userId).then(resp => {
      this.goods.cartInfo = resp.data
      console.log(this.goods.cartInfo);
    })
  },
  methods: {
    deleteItem(id) {
      axios.post('http://localhost:8080/goods//deleCart/' + id).then(resp => {
        axios.post('http://localhost:8080/goods//searchCartInfo/' + this.goods.userInfo.userId).then(resp => {
          this.goods.cartInfo = resp.data
        })
      })
      this.goods.cartNumber -= 1;
    },
    updateItem(id, count) {
      axios.post('http://localhost:8080/goods//updateCartNum/' + count + '/' + id).then(resp => {
        axios.post('http://localhost:8080/goods//searchCartInfo/' + this.goods.userInfo.userId).then(resp => {
          this.goods.cartInfo = resp.data
        })
      })
      console.log(id);
      console.log(count);
    },
    settle() {
      this.$router.push('/mall/purchase')
    }
  },
  computed: {
    totalPrice() {
      let sum = 0;
      this.goods.cartInfo.forEach(item => {
        sum += item.goodsCount * item.sellingPrice
      })
      return sum;
    },
    totalNumber() {
      let number = 0;
      this.goods.cartInfo.forEach(item => {
        number += item.goodsCount
      })
      return number;
    }

  }
}
</script>

<style scoped></style>